<template>
  <div id="personalCenter">
    <navigationBar></navigationBar>
    <right></right>
    <div class="personalCenter_content">
      <!-- 中间显示内容 -->
      <div class="contentCenter">
        <!-- 选项列表 -->
        <div class="optionList">
          <ul class="optionMenu">
            <!-- 循环每一个选项 -->
            <li
              class="menu"
              v-for="(item, index) in optionList"
              :key="index"
              :class="currentIndex == index ? 'bgColor' : 'bgNo'"
              @click="switchover(index)"
            >
              <div style="margin-left:50px;display: flex; align-items:center">
                <span class="menu_Icon">
                  <img :src="currentIndex == index ? item.activeIcon : item.icon" alt />
                </span>
                <span class="menu_Title">
                  <h4>{{ item.title }}</h4>
                </span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 显示区域 -->
        <div class="optionShow">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>
<script lang="">
import Vue from "vue";
import navigationBar from "../../components/navigationBar";
import right from "../../components/common/right_logo";
import foot from "../../components/footer";
export default Vue.extend({
  name: "personalCenter",
  components: {
    navigationBar,
    right,
    foot
  },
  data() {
    return {
      optionList: [
        {
          title: "账号管理",
          icon: require("../../assets/image/7_1_1_zhanghaoguanli1.png"),
          activeIcon: require("../../assets/image/7_1_1_zhanghaoguanli.png")
        },
        {
          title: "会员认证",
          icon: require("../../assets/image/7_1_1_huiyuanrenzheng1.png"),
          activeIcon: require("../../assets/image/7_1_1_huiyuanrenzheng.png")
        },
        {
          title: "我的订单",
          icon: require("../../assets/image/7_1_1_wodedingdan1.png"),
          activeIcon: require("../../assets/image/7_1_1_wodedingdani.png")
        },
        {
          title: "我的优惠券",
          icon: require("../../assets/image/7_1_1_wodeyouhuiquan1.png"),
          activeIcon: require("../../assets/image/7_1_1_wodeyouhuiquan.png")
        },
        {
          title: "我的积分",
          icon: require("../../assets/image/7_1_1_wodejifen1.png"),
          activeIcon: require("../../assets/image/7_1_1_wodejifen.png")
        },
        {
          title: "会员权益",
          icon: require("../../assets/image/7_1_1_huiyuanquanyi_u.png"),
          activeIcon: require("../../assets/image/7_1_1_huiyuanquanyi_s.png")
        },
        {
          title: "我的收藏",
          icon: require("../../assets/image/7_1_1_wodeshoucang1.png"),
          activeIcon: require("../../assets/image/7_1_1_wodeshoucang.png")
        },
        {
          title: "我的通知",
          icon: require("../../assets/image/7_1_1_wodetongzhi1.png"),
          activeIcon: require("../../assets/image/7_1_1_wodetongzhi.png")
        },
        {
          title: "帮助中心",
          icon: require("../../assets/image/7_1_1_bangzhuzhongxin1.png"),
          activeIcon: require("../../assets/image/7_1_1_bangzhuzhongxin.png")
        },
        {
          title: "联系客服",
          icon: require("../../assets/image/7_1_1_lianxikefu1.png"),
          activeIcon: require("../../assets/image/7_1_1_lianxikefu.png")
        }
      ], //选项列表
      currentIndex: 0 //当前选择项
    };
  },
  methods: {
    switchover(i) {
      this.currentIndex = i;
      if (this.currentIndex == 0) {
        this.$router.push({ path: "/personalCenter/manage" });
      } else if (this.currentIndex == 1) {
        this.$router.push({ path: "/personalCenter/member" });
      } else if (this.currentIndex == 2) {
        this.$router.push({ path: "/personalCenter/myorder" });
      } else if (this.currentIndex == 3) {
        this.$router.push({ path: "/personalCenter/myyhq" });
      } else if (this.currentIndex == 4) {
        this.$router.push({ path: "/personalCenter/myjf" });
      } else if (this.currentIndex == 5) {
        this.$router.push({ path: "/personalCenter/hyqy" });
      } else if (this.currentIndex == 6) {
        this.$router.push({ path: "/personalCenter/mysc" });
      } else if (this.currentIndex == 7) {
        this.$router.push({ path: "/personalCenter/mytz" });
      } else if (this.currentIndex == 8) {
        this.$router.push({ path: "/personalCenter/helpcenter" });
      } else if (this.currentIndex == 9) {
        this.$router.push({ path: "/personalCenter/contact" });
      }
    }
  },
  created() {
    if (this.currentIndex == 0) {
      this.$router.push({ path: "/personalCenter/manage" });
    }
  }
});
</script>
<style lang="scss" scoped>
.personalCenter_content {
  min-width: 1020px;
  background: #f5f5f5;
  // 中间显示内容
  .contentCenter {
    max-width: 1200px;
    min-width: 1020px;
    padding-bottom: 25px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    // 选项列表
    .optionList {
      width: 220px;
      height: 520px;
      background: #fff;
      .optionMenu {
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
        // 左侧每一个选项
        .menu {
          width: 100%;
          height: 30px;
          font-size: 16px;
          color: #4d4d4d;
          margin: 20px auto;
          display: flex;
          align-items: center;
          position: relative;
          cursor: pointer;
          //每个选项的小图标
          .menu_Icon {
            display: inline-block;
            width: 27px;
            height: 27px;
            margin-right: 10px;
          }
        }
      }
    }
    // 显示区域
    .optionShow {
      width: 950px;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
  //    选中当前选项的背景、字体色
  .bgColor {
    color: #f03a58 !important;
    border-left: 2px solid #f03a58;
  }
  .bgNo {
    border-left: 2px solid #fff;
  }
}
</style>
